<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
  <meta name="keywords" content="扫雷, saolei">
  <meta name="description" content="">
  <title>扫雷游戏网页版 - Minesweeper</title>
  <!-- 引入 gfs.js 文件，原文件名为 gfs.js -->
  <script src="gfs.js"></script>
  <!-- 引入 ns13.js 文件，原文件名为 ns13.js -->
  <script src="ns13.js"></script>
  <style>
    body {
      margin: 0;
    }

    input {
      height: 1.5rem;
      width: 3.8rem;
    }

    #face {
      border: 2px solid #808080;
      border-left-color: #fff;
      border-top-color: #fff;
    }

    #face:active {
      border: 2px solid #808080;
      border-bottom: 1px solid #808080;
      border-right: 1px solid #808080;
    }

    table {
      border-collapse: collapse;
    }

    .pad {
      border: 2px solid #808080;
      border-right-color: #fff;
      border-bottom-color: #fff;
    }

    input[type=checkbox] {
      vertical-align: middle;
      height: 1.19rem;
      width: 1.5rem;
    }

    .clk {
      text-decoration: underline;
      cursor: pointer;
      color: blue;
    }
  </style>
  <script>
    // 收起按钮的文本，原变量名: shou
    var collapseText = "收起";
    // 设置按钮的文本，原变量名: shez
    var settingsText = "设置";
    // 首字母不符合要求的提示信息，原变量名: w1
    var initialLetterError = "首字母不符合要求";
  </script>
  <base target="_top">
</head>

<body bgcolor="#f7f7f0" onload="applyNightMode();initGame();">
  <br>
  <center>
    <div>
      <b>网页扫雷游戏</b>
    </div>
    <div style="margin-top:0.8rem;">
      <!-- 选择基础难度，原函数调用: _123(1) -->
      <a class="clk" onclick="setGameDifficulty(1)">基础</a>
      &nbsp;
      <!-- 选择中级难度，原函数调用: _123(2) -->
      <a class="clk" onclick="setGameDifficulty(2)">中级</a>
      &nbsp;
      <!-- 选择专家难度，原函数调用: _123(3) -->
      <a class="clk" onclick="setGameDifficulty(3)">专家</a>
      &nbsp;
      <!-- 选择满屏难度，原函数调用: _123(4) -->
      <a class="clk" onclick="setGameDifficulty(4)">满屏</a>
      &nbsp;
      <!-- 选择自定义难度，原函数调用: _123(5) -->
      <a class="clk" onclick="setGameDifficulty(5)">自定义</a>
    </div>
    <div id="custom" style="display:none;margin-top:5">
      <!-- 自定义横向格子数量，原 id: hm -->
      横<input id="horizontalCells" type="number" value="40">
      <!-- 自定义纵向格子数量，原 id: vm -->
      竖<input id="verticalCells" type="number" value="24">
      <!-- 自定义地雷数量，原 id: mm -->
      雷<input id="mineCount" type="number" value="199">
      <!-- 确认自定义设置，原函数调用: udf() -->
      <input type="button" onclick="setCustomDifficulty()" value="确定">
    </div>
    <table style="margin-top:0.8rem;border-radius:6px;background:#cccccc">
      <tr>
        <td style="padding:9px;">
          <table id="p42" class="pad" style="height:34px">
            <tr>
              <td width="50%">
                <!-- 显示剩余地雷数量的画布，原 id: rm -->
                <canvas id="remainingMinesCanvas" height="23" width="39"></canvas>
              </td>
              <td align="center" onmouseup="resetGame()" style="padding:0 8 0 8">
                <!-- 游戏表情图标，原 id: face -->
                <img id="gameFace">
              </td>
              <td width="50%" align="right">
                <!-- 显示游戏用时的画布，原 id: es -->
                <canvas id="elapsedTimeCanvas" height="23" width="39"></canvas>
              </td>
            </tr>
          </table>
          <!-- 游戏主画布，原 id: paf -->
          <canvas id="gameCanvas" class="pad" style="margin-top:6px;" width="0" height="0"></canvas>
        </td>
      </tr>
    </table>
    <div style="margin-top:2rem;">
      <!-- 成绩榜链接，原 id: ss -->
      <a id="scoreboardLink" href="scores.htm">成绩榜</a>
    </div>
    <div style="width:90%;text-align:left;margin-top:3rem;">
      <span style="vertical-align:middle">自动标雷</span>
      <!-- 自动标雷开关，原 id: af -->
      <input type="checkbox" checked id="autoFlagging" onclick="setAutoFlagging()">
      <span style="float:right">
        夜间<input type="checkbox" id="nightMode" onclick="toggleNightMode()">
      </span>
    </div>
    <div style="width:90%;text-align:left;margin-top:3rem;">
      <a id="mouseSettingsLink" class="clk" onclick="toggleMouseSettings()">设置</a>
      <div id="mouseSettings" style="border:solid 1px;display:none;padding:0.5rem;">
        鼠标起效时间点
        <br>
        <br>
        <i>左键</i>
        <br>
        <br>
        <input type="radio" name="leftMouseButton" value="0" onclick="saveMouseSetting(0, 0);">
        按下时
        <input type="radio" name="leftMouseButton" value="1" onclick="saveMouseSetting(0, 1);">
        弹起时
        <br>
        <br>
        <br>
        <i>右键</i>
        <br>
        <br>
        <input type="radio" name="rightMouseButton" value="0" onclick="saveMouseSetting(1, 0);">
        按下时
        <input type="radio" name="rightMouseButton" value="1" onclick="saveMouseSetting(1, 1);">
        弹起时
        <br>
        <br>
      </div>
      <a id="touchSettingsLink" class="clk" onclick="toggleTouchSettings()">设置</a>
      <div id="touchSettings" style="border:solid 1px;display:none;padding:0.5rem;">
        <i>触击效果</i>
        <br>
        <br>
        <input type="radio" name="touchEffect" value="0" checked onclick="saveTouchSetting(2, 0);showMoreTouchOptions(0);">
        标记
        <input type="radio" name="touchEffect" value="1" onclick="saveTouchSetting(2, 1);showMoreTouchOptions(1);">
        直开
        <br>
        <br>
        <br>
        <div id="directOpenHint" style="display:none;">
          <i>直开模式下的标记方法</i>
          <br>
          <br>
          长按
        </div>
        <div id="markingOpenMethod" style="display:none;">
          <i>标记模式下的打开方法</i>
          <br>
          <br>
          <input type="radio" name="openMethod" value="0" checked onclick="saveTouchSetting(3, 0)">
          长按
          <input type="radio" name="openMethod" value="1" onclick="saveTouchSetting(3, 1)">
          快点三次
          <br>
          <br>
        </div>
      </div>
    </div>
    <div style="width:90%;text-align:left;margin-top:3rem;">
      第一次点击不会是雷。格子里的数字表示它周围有几个雷。游戏目标是找出所有雷。“触雷”则输。点击表情重新开始。
      <b>二选一留到最后，可任选</b>
      ，需先清完其他方块。
      <br>
      <br>
      <b>电脑：</b>
      鼠标右键点击原始方块，以小旗标记为雷，再点去除标记。标记的雷数和数字匹配时，点击数字（左右键均可）翻开周围的安全区域。鼠标左键点击无标记方块则直接打开。
      <a id="setm" class="clk" onclick="toggleMouseSettings()">设置</a>
      <br>
      <br>
      <b>手机或平板：</b>
      在触屏上点击方块即标记为雷，再点去除标记。标记的雷数和数字匹配时，点击数字翻开周围的安全区域。长按方块直接打开。（可设置为点击直接打开；或点击三次打开）
      <a id="sett" class="clk" onclick="toggleTouchSettings()">设置</a>
      <br>
      <br>
      扫雷游戏起源于1973年的"方块"游戏。1992年微软发布的Windows 3.1中加入该游戏，从此风靡全世界。玩扫雷游戏，可以锻炼观察和推理能力，培养细心和耐心。
      <a href="doc/jichudingshi.htm">基础定式</a>
      <br>
      <br>
      局域网中如访问不正常，可清空缓存或用https访问。
      <br>
      <br>
      安卓手机上连击放大问题：【设置】-【智能辅助】-【无障碍】-【放大手势】-关闭。
      <!-- 苹果：【设置】-【通用】-【辅助功能】-【缩放】-关闭。 -->
    </div>
    <div style="margin-top:6rem;width:90%">
      <!-- 用户 ID 显示，原 id: uid -->
      ID: <span id="userId"></span>
      <a id="setr" class="clk" onclick="toggleRenameSettings()">设置</a>
      <div id="renameSettings" style="border:solid 1px;display:none;padding:0.5rem;">
        <!-- 昵称输入框，原 id: nick -->
        昵称：<input id="userNickname" type="text" style="width:5rem;">
        <input type="button" value="确定" onclick="renameUser()">
      </div>
    </div>
  </center>
</body>

</html>